html{
    @media screen and (min-width:157.5px) {
        font-size: 21.875px;
    }
    @media screen and (min-width:210px) {
        font-size: 29.11111111111111px;
    }
    @media screen and (min-width:280px) {
        font-size: 38.8888888888888px;
    }
    @media screen and (min-width:375px) {
        font-size: 52.08333333333333px;
    } 
}


.box{
    padding-bottom: 104px;
    overflow: hidden;
    #nav{
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #1c91dd;
        &>input{
            display: none;
            &:checked{
                &~label{
                    .navList{
                        display: block;
                    }
                }
            }
        }
        &>label{
            position: relative;
            .icon{
                display: flex;
                align-items: center;
                &>img{
                    @height:1.44rem;
                    @media screen and(max-width:648px) {
                        height: @height*0.9;
                    }
                    @media screen and(max-width:576px) {
                        height: @height*0.8;
                    }
                    @media screen and(max-width:504px) {
                        height: @height*0.7;
                    }
                    @media screen and(max-width:432px) {
                        height: @height*0.6;
                    }
                    @media screen and(max-width:360px) {
                        height: @height*0.5;
                    }
                }
                &>span{
                    color: #1c91dd;
                    font-size: .6528rem;
                    margin: 0 .4608rem;
                }
            }
            .navList{
                @width:25.7vw;
                border: 1px solid #dddddd;
                position: absolute;
                width: @width;
                display: none;
                z-index: 1;
                background-color: #fff;
                @media screen and(max-width:648px) {
                    width: @width*1.15;
                }
                @media screen and(max-width:576px) {
                    width: @width*1.35;
                }
                @media screen and(max-width:504px) {
                    width: @width*1.55;
                }
                @media screen and(max-width:432px) {
                    width: @width*1.75;
                }
                @media screen and(max-width:360px) {
                    width: @width*1.9;
                }
                &>input{
                    display: none;
                    &:checked{
                        &+label{
                            background-color: #1c91dd;
                            color: #fff;
                        }
                    }
                }
                &>label{
                    display: flex;
                    align-items: center;
                    padding-left: 2.78vh;
                    line-height: 60px;
                    font-size: .4608rem;
                    color: #333333;
                    &>a{
                     
                        text-decoration: none;
                    }
                }
            }
        }
        .logoBox{
            display: flex;
            align-items: center;
            justify-content: center;
            flex: 1;
            &>img{
                @width:3.744rem;
                @media screen and(max-width:648px) {
                    width: @width*0.9;
                }
                @media screen and(max-width:576px) {
                    width: @width*0.8;
                }
                @media screen and(max-width:504px) {
                    width: @width*0.7;
                }
                @media screen and(max-width:432px) {
                    width: @width*0.6;
                }
                @media screen and(max-width:360px) {
                    width: @width*0.5;
                }
            }
        }    
        .search{
            display: flex;
            align-items: center;
            &>img{
                @height:1.44rem;
                @media screen and(max-width:648px) {
                    height: @height*0.9;
                }
                @media screen and(max-width:576px) {
                    height: @height*0.8;
                }
                @media screen and(max-width:504px) {
                    height: @height*0.7;
                }
                @media screen and(max-width:432px) {
                    height: @height*0.6;
                }
                @media screen and(max-width:360px) {
                    height: @height*0.5;
                }
            }
            &>span{
                font-size: .8448rem;
                margin: 0 .4608rem;
                color: #1c91dd;
            }
        }
    }
    #banner{
        .itemList{
            .item{
                display: flex;
                &>img{
                    width:100%;
                }
            }
        }
    }
    #estimate{
        &>p{
            @fontSize:.5568rem;
            @lineHeigh:1.248rem;
            display: flex;
            white-space: nowrap;
            align-items: center;
            line-height: @lineHeigh;
            font-size: @fontSize;
            justify-content: space-between;
            @media screen and (max-width:504px){
                font-size:  @fontSize*0.7;
                line-height:  @lineHeigh*0.7;
            }
            @media screen and (max-width:360px){
                font-size:  @fontSize*0.5;
                line-height:  @lineHeigh*0.5;
            }
            span{
                padding: 0 .4224rem;
                color: #95ccef;
            }
            &::before{
                content: '';
                display: inline-block;
                width: 38.75%;
                height: .0192rem;
                background-color: #cccccc;
            }
            &::after{
                content: '';
                display: inline-block;
                width: 38.75%;
                height: .0192rem;
                background-color: #cccccc;
            }
        }
        &>ul{
            margin-top: .2496rem;
            display: flex;
            align-items: center;
            justify-content: space-around;
            &>li{
                &:nth-of-type(1){
                    &>a{
                        .imgBox{
                            background-color: #1c91dd;
                        }
                    }
                }
                &:nth-of-type(2){
                    &>a{
                        .imgBox{
                            background-color: #21b06e;
                        }
                    }
                }
                &:nth-of-type(3){
                    &>a{
                        .imgBox{
                            background-color: #fab400;
                        }
                    }
                }
                &:nth-of-type(4){
                    &>a{
                        .imgBox{
                            background-color: #ab5de9;
                        }
                    }
                }
                &>a{
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    text-decoration: none;
                    .imgBox{
                        width: 16.667vw;
                        height: 16.667vw;
                        border-radius: 50%;
                        overflow: hidden;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        &>img{
                            width: 68%;
                        }
                    }
                    &>span{
                        @fontSize:.4224rem;
                        font-size: @fontSize;
                        color: #333;
                        line-height: .7872rem;
                        @media screen and (max-width:504px){
                            font-size:  @fontSize*0.7;
                        }
                        @media screen and (max-width:360px){
                            font-size:  @fontSize*0.6;
                        }
                    }
                }
            }
        }
    }
    #speciality{
        margin-top: .48rem;
        .itemList{
            display: flex;
            flex-wrap: wrap;
            &>div{
                width: 33.333333333%;
            }
            .imgBox{
                display: flex;
                &>img{
                    width: 100%;
                }
            }
            .textBox{
                background-color: #f5f5f5;
                box-sizing: border-box;
                padding-left: .384rem;
                &>p{
                    @fontSize:.3648rem;
                    @lineHeight:.7488rem;
                    font-size:@fontSize;
                    line-height: @lineHeight;
                    @media screen and(max-width:648px) {
                        font-size: @fontSize*0.9;
                        line-height: @lineHeight*0.9;
                    }
                    @media screen and(max-width:576px) {
                        font-size: @fontSize*0.8;
                        line-height: @lineHeight*0.8;
                    }
                    @media screen and(max-width:504px) {
                        font-size: @fontSize*0.7;
                        line-height: @lineHeight*0.7;
                    }
                    @media screen and(max-width:432px) {
                        font-size: @fontSize*0.6;
                        line-height: @lineHeight*0.6;
                    }
                    @media screen and(max-width:400px) {
                        font-size: @fontSize*0.5;
                        line-height: @lineHeight*0.5;
                    }
                    @media screen and(max-width:375px) {
                        font-size: @fontSize*0.6;
                        line-height: @lineHeight*0.6;
                    }
                    color: #666666;
                    &:nth-of-type(1){
                        @fontSize:.5568rem;
                        @lineHeight:1.2288rem;
                        @marginTop:.3264rem;
                        font-size: @fontSize;
                        line-height: @lineHeight;
                        color: #232323;
                        margin-top: @marginTop;
                        @media screen and(max-width:648px) {
                            font-size: @fontSize*0.9;
                            line-height: @lineHeight*0.9;
                            margin-top: @marginTop*0.9;
                        }
                        @media screen and(max-width:576px) {
                            font-size: @fontSize*0.8;
                            line-height: @lineHeight*0.8;
                            margin-top: @marginTop*0.8;
                        }
                        @media screen and(max-width:504px) {
                            font-size: @fontSize*0.7;
                            line-height: @lineHeight*0.7;
                            margin-top: @marginTop*0.7;
                        }
                        @media screen and(max-width:432px) {
                            font-size: @fontSize*0.6;
                            line-height: @lineHeight*0.6;
                            margin-top: @marginTop*0.6;
                        }
                        @media screen and(max-width:400px) {
                            font-size: @fontSize*0.5;
                            line-height: @lineHeight*0.5;
                            margin-top: @marginTop*0.5;
                        }
                        @media screen and(max-width:375px) {
                            font-size: @fontSize*0.6;
                            line-height: @lineHeight*0.6;
                        }
                    }
                }
            }
        }
    }
    #introduce{
        &>p{
            @fontSize:.5568rem;
            @lineHeigh:1.248rem;
            display: flex;
            white-space: nowrap;
            align-items: center;
            line-height: @lineHeigh;
            font-size: @fontSize;
            justify-content: space-between;
            @media screen and (max-width:504px){
                font-size:  @fontSize*0.7;
                line-height:  @lineHeigh*0.7;
            }
            @media screen and (max-width:360px){
                font-size:  @fontSize*0.5;
                line-height:  @lineHeigh*0.5;
            }
            span{
                padding: 0 .4224rem;
                color: #95ccef;
            }
            &::before{
                content: '';
                display: inline-block;
                width: 38.75%;
                height: .0192rem;
                background-color: #cccccc;
            }
            &::after{
                content: '';
                display: inline-block;
                width: 38.75%;
                height: .0192rem;
                background-color: #cccccc;
            }
        }
        .content{
            position: relative;
            &:hover{
                .history{
                    transform: translateX(0rem);
                }
            }
            .imgBox{
                display: flex;                
                &>img{
                    width: 100%;
                }
            }
            .history{
                position: absolute;
                top: 0;
                background-color: rgba(0,0,0,.5);
                width: 36vw;
                height: 100%;
                display: flex;
                justify-content: center;
                transform: translateX(-100%);
                transition: .5s;
                &>div{
                    display: flex;
                    align-items: center;
                    flex-direction: column;
                    &>p{
                        font-size: .5376rem;
                        line-height: 1.4784rem;
                        margin-top: .192rem;
                        color: #fff;
                        @media screen and(max-width:580px) {
                            line-height: .8870rem;
                            font-size: .3225rem;
                        }
                    }
                    .itemList{
                        .row{
                            display: flex;
                            margin: 0 auto;
                            margin-top: .192rem;
                            &:nth-of-type(1){
                                margin-top: 0;
                            }
                            .item{
                                border: .0192rem solid #ffffff;
                                margin: 0 .096rem;
                                font-size: .384rem;
                                line-height: .7296rem;
                                padding: 0 .4224rem;
                                color: #fff;
                                @media screen and(max-width:580px) {
                                    font-size: .307rem;
                                    padding: 0 .3379rem;
                                    line-height: .5836rem;
                                }
                                @media screen and(max-width:450px) {
                                    font-size: .230rem;
                                    padding: 0 .2534rem;
                                    line-height: .4377rem;
                                }
                            }
                        }
                     
                    }
                }
             
            }
        }
        .otherList{
            margin-top: .384rem;
            .item{
                @marginleft: 0.383rem;
                @fontSize: 0.5184rem;
                @lineHeight: 2.304rem;
                display: flex;
                justify-content: space-between;
                .career{
                    width: 49.3%;
                    background-color: #55acee;
                    display: flex;
                    justify-content: center;
                    &>div{
                        display: flex;
                        align-items: center;
                        &>img{
                            @height:1.3056rem;
                            @media screen and(max-width:580px) {
                                height:@height*0.8;
                            }
                            @media screen and(max-width:480px) {
                                height:@height*0.8;
                            }
                            @media screen and(max-width:380px) {
                                height:@height*0.4;
                            }
                        }
                        &>p{  
                            margin-left: @marginleft;
                            font-size: @fontSize;
                            line-height: @lineHeight;
                            color: #fff;
                            @media screen and(max-width:580px) {
                                margin-left: @marginleft*0.8;
                                font-size: @fontSize*0.8;
                                line-height: @lineHeight*0.8;
                            }
                            @media screen and(max-width:480px) {
                                margin-left: @marginleft*0.6;
                                font-size: @fontSize*0.6;
                                line-height: @lineHeight*0.6;
                            }
                            @media screen and(max-width:380px) {
                                margin-left: @marginleft*0.4;
                                font-size: @fontSize*0.4;
                                line-height: @lineHeight*0.4;
                            }
                        }
                    }       
                }
                .self{
                    width: 49.3%;
                    background-color: #3b5998;
                    display: flex;
                    justify-content: center;
                    &>div{
                        display: flex;
                        align-items: center;
                        &>img{
                            @height:1.3056rem;
                            @media screen and(max-width:580px) {
                                height:@height*0.8;
                            }
                            @media screen and(max-width:480px) {
                                height:@height*0.8;
                            }
                            @media screen and(max-width:380px) {
                                height:@height*0.4;
                            }
                        }
                        &>p{
                            margin-left: @marginleft;
                            font-size: @fontSize;
                            line-height:@lineHeight;
                            color: #fff;
                            @media screen and(max-width:580px) {
                                margin-left: @marginleft*0.8;
                                font-size: @fontSize*0.8;
                                line-height: @lineHeight*0.8;
                            }
                            @media screen and(max-width:480px) {
                                margin-left: @marginleft*0.6;
                                font-size: @fontSize*0.6;
                                line-height: @lineHeight*0.6;
                            }
                            @media screen and(max-width:380px) {
                                margin-left: @marginleft*0.4;
                                font-size: @fontSize*0.4;
                                line-height: @lineHeight*0.4;
                            }
                        }
                    }       
                }
                .otherApp{
                    margin-top: .192rem;
                    width: 100%;
                    background-color: #363a42;
                    display: flex;
                    justify-content: center;
                    &>div{
                        display: flex;
                        align-items: center;
                        &>img{
                            @height:.6336rem;
                            @media screen and(max-width:580px) {
                                height:@height*0.8;
                            }
                            @media screen and(max-width:480px) {
                                height:@height*0.8;
                            }
                            @media screen and(max-width:380px) {
                                height:@height*0.4;
                            }
                        }
                        &>p{
                            margin-left: @marginleft;
                            font-size: @fontSize;
                            line-height: @lineHeight;
                            color: #fff;
                            @media screen and(max-width:580px) {
                                margin-left: @marginleft*0.8;
                                font-size: @fontSize*0.8;
                                line-height: @lineHeight*0.8;
                            }
                            @media screen and(max-width:480px) {
                                margin-left: @marginleft*0.6;
                                font-size: @fontSize*0.6;
                                line-height: @lineHeight*0.6;
                            }
                            @media screen and(max-width:380px) {
                                margin-left: @marginleft*0.4;
                                font-size: @fontSize*0.4;
                                line-height: @lineHeight*0.4;
                            }
                        }
                    }       
                }
            }
        }
    }
    #concate{
        padding-bottom: .4032rem;
        &>p{
            @fontSize:.5568rem;
            @lineHeigh:1.248rem;
            display: flex;
            white-space: nowrap;
            align-items: center;
            line-height: @lineHeigh;
            font-size: @fontSize;
            justify-content: space-between;
            @media screen and (max-width:504px){
                font-size:  @fontSize*0.7;
                line-height:  @lineHeigh*0.7;
            }
            @media screen and (max-width:360px){
                font-size:  @fontSize*0.5;
                line-height:  @lineHeigh*0.5;
            }
            span{
                padding: 0 .4224rem;
                color: #95ccef;
            }
            &::before{
                content: '';
                display: inline-block;
                width: 38.75%;
                height: .0192rem;
                background-color: #cccccc;
            }
            &::after{
                content: '';
                display: inline-block;
                width: 38.75%;
                height: .0192rem;
                background-color: #cccccc;
            }
        }
        .container{
            .itemBox{
                padding-left: .384rem;
                .itemList{
                    display: flex;
                    align-items: center;
                    margin-top: 10px;
                    &:nth-of-type(1){
                        margin-top: 0;
                    }
                    .item{
                        display: flex;
                        align-items: center;
                        &:nth-of-type(2){
                            margin-left: .768rem;
                        }
                        .iconBox{
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            border: 1px solid #d1d1d1;
                            padding: .1152rem .0768rem;
                            .iconfont{
                                @fontSize:.4992rem;
                                color: #888888;
                                font-size: @fontSize;
                                @media screen and (max-width:400px) {
                                    font-size: @fontSize*0.9;
                                }
                            }    
                        }
                        &>span{
                            @fontSize:.288rem;
                            font-size: @fontSize;
                            color: #333333;
                            margin-left: .1728rem;
                            @media screen and (max-width:400px) {
                                font-size: @fontSize*0.9;
                            }
                        }
                    }
                }
            }
            #map{
                margin-top: .384rem;
                width: 100%;
                height: 5.76rem;
            }
        }
    }
    #tabBar{
        background-color: #f5f5f5;
        position: fixed;
        z-index: 999;
        bottom: 0;
        width: 100%;
        &>input{
            display: none;
            &#tabBar1:checked{
                &~.labelList{
                    &>label{
                        &:nth-of-type(1){
                            background-color: #1c91dd;
                            &>div{                           
                                &>span{
                                    color: #fff;
                                }
                            }
                        }
                    }
                }
            }
            &#tabBar2:checked{
                &~.labelList{
                    &>label{
                        &:nth-of-type(2){
                            background-color: #1c91dd;
                            &>div{                           
                                &>span{
                                    color: #fff;
                                }
                            }
                        }
                    }
                }
            }
            &#tabBar3:checked{
                &~.labelList{
                    &>label{
                        &:nth-of-type(3){
                            background-color: #1c91dd;
                            &>div{                           
                                &>span{
                                    color: #fff;
                                }
                            }
                        }
                    }
                }
            }
            &#tabBar4:checked{
                &~.labelList{
                    &>label{
                        &:nth-of-type(4){
                            background-color: #1c91dd;
                            &>div{                           
                                &>span{
                                    color: #fff;
                                }
                            }
                        }
                    }
                }
            }
        }
        .labelList{
            display: flex;
            &>label{
                width: 25%;
                color: #666666;
                padding: .2688rem 0;
                &>div{
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    &>span{
                        &:nth-of-type(1){
                            @fontSize:.7296rem;
                            font-size: @fontSize;
                            @media screen and(max-width:648px) {
                                font-size: @fontSize*0.9;
                            }
                            @media screen and(max-width:576px) {
                                font-size: @fontSize*0.8;
                            }
                            @media screen and(max-width:504px) {
                                font-size: @fontSize*0.7;
                            }
                            @media screen and(max-width:432px) {
                                font-size: @fontSize*0.6;
                            }
                        } 
                        &:nth-of-type(2){
                            @fontSize:.4224rem;
                            @lineHeight:.7296rem;
                            line-height: @lineHeight;
                            font-size: @fontSize;
                            @media screen and(max-width:648px) {
                                font-size: @fontSize*0.9;
                                line-height: @lineHeight*0.9;
                            }
                            @media screen and(max-width:576px) {
                                font-size: @fontSize*0.8;
                                line-height: @lineHeight*0.8;
                            }
                            @media screen and(max-width:504px) {
                                font-size: @fontSize*0.7;
                                line-height: @lineHeight*0.7;
                            }
                            @media screen and(max-width:432px) {
                                font-size: @fontSize*0.6;
                                line-height: @lineHeight*0.6;
                            }
                        }  
                    }
                }
            }
        }
    }
}